import { createContext, useContext } from "react";

function Child({ children }) {
    const level = useContext(levelContext)
    return (
        <levelContext.Provider value={level + 1}>
            {children}
        </levelContext.Provider>
    );
}

function Header({children}) {
    const level = useContext(levelContext)
    switch (level) {
        case 1:
            return <h1>{children}</h1>
        case 2:
            return <h2>{children}</h2>
        case 3:
            return <h3>{children}</h3>
        case 4:
            return <h4>{children}</h4>
        case 5:
            return <h5>{children}</h5>
        case 6:
            return <h6>{children}</h6>

        default:
            return <p>{children}</p>
    }
}

const levelContext = createContext(0)
export default function Parent() {
    return (
        <Child>
            <Header>主标题</Header>
            <Child>
                <Header>副标题</Header>
                <Header>副标题</Header>
                <Header>副标题</Header>
                <Header>副标题</Header>
                <Child>
                    <Header>子标题</Header>
                    <Header>子标题</Header>
                    <Header>子标题</Header>
                    <Header>子标题</Header>
                </Child>
            </Child>
        </Child>
    );
}